<!--最近对一份工作-->
<template>
  <div>
    <van-form @submit="onSubmit" @failed="failed">
      <!--      公司名称-->
      <div class="input">
        <label>公司名称</label>
        <van-field
          v-model="company_name"
          name="company_name"
          placeholder="请填写公司名称"
          clearable
          :rules="[{ required: true }]"
        />
      </div>
      <!--      意向岗位-->
      <div class="input">
        <label>所属行业</label>
        <!--        <van-cell is-link @click="show = !show">展示弹出层</van-cell>-->
        <van-field
          v-model="Subordinate_industry"
          name="Subordinate_industry"
          placeholder="请选择所属行业"
          :rules="[{ required: true}]"
          is-link
          disabled
          @click="show_Subordinate_industry_model = !show_Subordinate_industry_model"
        />
        <van-popup v-model="show_Subordinate_industry_model" round position="bottom" :style="{ height: '40%' }">
          <van-picker
            title="所属行业"
            show-toolbar
            :columns="Subordinate_industry_list"
            @confirm="Subordinate_industry_onConfirm"
          />
        </van-popup>
      </div>
      <!--      职位名称-->
      <div class="input">
        <label>职位名称</label>
        <van-field
          v-model="position_name"
          name="position_name"
          placeholder="请填写职位名称"
          clearable
          :rules="[{ required: true }]"
        />
      </div>
      <!--      入职时间-->
      <div class="input">
        <label>入职时间</label>
        <van-field
          v-model="In_time"
          name="In_time"
          placeholder="请填写入职时间"
          :rules="[{ required: true}]"
          is-link
          disabled
          @click="show_In_time_model = !show_In_time_model"
        />
        <van-popup v-model="show_In_time_model" round position="bottom" :style="{ height: '40%' }">
          <van-datetime-picker
            v-model="currentDate"
            type="date"
            title="选择入职时间"
            :min-date="minDate"
            :max-date="maxDate"
            :formatter="formatter"
            @confirm="In_timeConfirm"
          />
        </van-popup>
      </div>
      <!--      离职时间-->
      <div class="input">
        <label>离职时间</label>
        <van-field
          v-model="out_time"
          name="out_time"
          placeholder="请填写离职时间"
          :rules="[{ required: true}]"
          is-link
          disabled
          @click="show_out_time_model = !show_out_time_model"
        />
        <van-popup v-model="show_out_time_model" round position="bottom" :style="{ height: '40%' }">
          <van-datetime-picker
            v-model="currentDate"
            type="date"
            title="选择离职时间"
            :min-date="minDate"
            :max-date="maxDate"
            :formatter="formatter"
            @confirm="out_timeConfirm"
          />
        </van-popup>
      </div>
      <!--      工作描述-->
      <div class="input">
        <div class="content">
          <p class="text">工作描述</p>
          <van-field
            v-model="job_description"
            name="job_description"
            type="textarea"
            placeholder="您对工作描述..."
            maxlength="750"
            show-word-limit
            class="job_description"
          >
          </van-field>
        </div>
      </div>
      <van-button native-type="submit" round type="default" style="width: 100%; margin-top: 30px;" :class="{'btn_active': btn_active}">下一步</van-button>
    </van-form>
  </div>
</template>

<script>
export default {
  name: 'form3-content',
  data () {
    return {
      company_name: '',
      Subordinate_industry: '',
      position_name: '',
      In_time: '',
      out_time: '',
      job_description: '',
      show_Subordinate_industry_model: false,
      show_In_time_model: false,
      show_out_time_model: false,
      Subordinate_industry_list: ['金融', '计算机', '教育', '事业单位', '其它'],
      minDate: new Date(1990, 0, 1),
      maxDate: new Date(2020, 10, 1),
      currentDate: new Date(),
      btn_active: true
    }
  },
  methods: {
    onSubmit (obj) {
      this.$store.dispatch('userInfo', obj)
      this.$router.push('/page4')
      this.$store.state.active++
    },
    failed () {
      this.$Notify({type: 'warning', message: '请填写完整的信息'});
    },
    Subordinate_industry_onConfirm (value) {
      this.Subordinate_industry = value
      this.show_Subordinate_industry_model = false
    },
    In_timeConfirm (t) {
      this.In_time = this.$moment(t).format('YYYY-MM-DD')
      this.show_In_time_model = false
    },
    out_timeConfirm (t) {
      this.out_time = this.$moment(t).format('YYYY-MM-DD')
      this.show_out_time_model = false
    },
    formatter (type, val) {
      if (type === 'year') {
        return `${val}年`;
      } else if (type === 'month') {
        return `${val}月`;
      }
      return val;
    }
  },
  mounted () {
    this.$store.dispatch('active', 2)
  }
}
</script>

<style lang="scss" scoped>
.input {
  border-bottom: 0.5px dashed #cccccc;
  margin-top: 8px;

  label {
    color: #353535;
    font-size: 14px;
    padding-left: 16px;

    &::after {
      content: '*';
      color: red;
    }
  }

  &.job_status {
    .job_status_group {
      display: flex;
      justify-content: flex-start;

      .job_status_item {
        padding: 8px 0;
      }
    }
  }

  .content {
    padding: 10px 16px;

    .text {
      color: #353535;
      font-size: 14px;
    }

    .job_description {
      margin-top: 10px;
      text-indent: 1em;
      line-height: 1.4em;
      color: #a3a8b2;
      border: 3px solid #e5e9ee;
      border-radius: 5px;
    }
  }
}

.btn_active {
  background-color: #59c262;
  color: #ffffff;
}
</style>
